<template>
  <div>
    <div class="box4">
      <div class="goodsshow" v-for="(v, i) in newarr" :key="i">
        <img src="../../../assets/pisa.png" alt="" />
        <span class="name">{{ v[0] }}</span>
        <span class="price">${{ v[1] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getlink } from "@/api/getlink.js";
export default {
  data() {
    return {
      arre: [],
    };
  },
  computed: {
    newarr() {
      const arrw = [];
      for (let v of this.arre) {
        for (let m of v.goodslist) {
          const arrq = [];
          arrq.push(m.name);
          arrq.push(m.price);
          arrw.push(arrq);
        }
      }
      console.log(arrw);
      return arrw;
    },
  },
  mounted: function () {
    getlink("/data/json").then((ok) => {
      this.arre = ok.data.shangjia;
    });
  },
};
</script>

<style scoped>
.box4 {
  width: 3.5rem;
  min-height: 5rem;
  background-color: pink;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  background-color: rgb(245, 245, 245);
}
.goodsshow {
  width: 1.7rem;
  height: 2.5rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
  border: 1px solid rgb(160, 160, 160);
  border-radius: 0.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.16rem;
  font-weight: 700;
}
.goodsshow > img {
  width: 100%;
}
.name {
  margin: 0.1rem 0 0 0.1rem;
}
.price {
  margin: 0.1rem 0 0 0.1rem;
  color: red;
}
</style>